import { useState, useRef } from "react";
import { Spin, Popconfirm, message } from "antd";
import { QueryTable } from "@/components/QueryTable";
import useAdminPermission from '@/components/_hooks/useAdminPermission';
import OperateMemberDrawer from "./operateMemberDrawer"
import { deleteMember } from '@/api';

import "./index.less";

export default function MemberManege() {
  const [load, setLoad] = useState(false);
  const [showModal, setModal] = useState(false);
  const [editItem, setEditItem] = useState({})
  const tableRef = useRef()
  const isAdmin = useAdminPermission()

  const onDrawershow = (id: any, showStatus: boolean) => {
    setModal(showStatus);
  };

  // 回复
  const onFinish = (data?: any) => {
    tableRef?.current?.refreshTable()
  };

  const delMember = (id: number) => {
    deleteMember({ id }).then((data) => {
      if (!data) return
      message.success('删除成功');
      onFinish?.();
    })
      .catch((err) => {
        throw (err)
      });
  }

  const columns = [
    {
      dataIndex: "realName",
      key: "realName",
      title: "姓名",
      width: 100,
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: "phone",
      key: "phone",
      title: "电话",
      width: 130,
    },
    {
      dataIndex: "deptId",
      key: "deptId",
      title: "部门",
      searchConfig: {
        type: 'select',
        selectConfig: {
          data: [
            { name: '总公司', value: '1' },
            { name: '销售部', value: '2' }
          ],
          optionValue: 'value',
          optionLabel: 'name',
        },
      },
      enumMapping: {
        '1': '总公司',
        '2': '销售部'
      }
    },
    {
      dataIndex: "gender",
      key: "gender",
      title: "性别",
      width: 100,
      enumMapping: {
        'man': '男',
        'woman': '女'
      }
    },
    {
      dataIndex: "age",
      key: "age",
      // width: 320,
      title: "年龄",
    },
    // {
    //   dataIndex: "status",
    //   key: "status",
    //   title: "在职状态",
    // },
    {
      dataIndex: "action",
      key: "action",
      title: "操作",
      render: (_, record) => {
        if (!isAdmin) return '--'
        return (
          <>
            <a onClick={() => {
              setModal(true)
              setEditItem(record)
            }}>
              编辑
            </a>
            &nbsp;
            <Popconfirm
              title="员工删除"
              description="确认删除此员工吗?"
              onConfirm={() => delMember(record?.employeeId)}
              okText="确定"
              cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </>

        )
      }
    }
  ];

  return (
    <div className="feedback-container">
      <Spin spinning={load}>
        <QueryTable
          ref={tableRef}
          columns={columns}
          pagingInServer
          requestUrl="/crm/employee/page"
          responseDatafield="data"
          multipleButtons={isAdmin && [
            {
              type: "primary",
              disabled: false,
              clickFn: () => setModal(true),
              text: "新增",
            },
          ]}
        // getDataList={getDataList}
        // dataSource={tableData}
        // pagination={false}
        />
        <OperateMemberDrawer
          setEditItem={setEditItem}
          editItem={editItem}
          isShow={showModal}
          onFinish={onFinish}
          onCancel={onDrawershow}
        />
      </Spin>
    </div>
  );
}
MemberManege.route = {
  [MENU_PATH]: "/framework/member",
};
